<template>
	<view class="vip-box">
		<view class="no-vip" v-if="!vipInfo">
			<view class="no-header">
				<view class="header-left">
					<image class="vip-icon" src="http://loto.oss-cn-shanghai.aliyuncs.com/email/e9295dc5c4774a5a.png" mode=""></image>
					<view class="">
						<view class="title">
							小鹿会员
						</view>
						<view class="desc">
							成为小鹿专属会员，尊享5项权益
						</view>
						
					</view>
				</view>
				<view class="button" @click="toShop">
					立即开通
				</view>
			</view>
			<view class="vip-desc">
				<view class="desc-item" v-for="item in descList">
					<view class="icon-box">
						<image class="icon" :src="item.url" mode=""></image>
					</view>
					<view class="text">
						{{item.text}}
					</view>
				</view>
			</view>
			
		</view>
		<view v-else class="vip">
			<view class="vip-header">
				<view class="vip-info">
					<text class="vip-name">{{vipInfo.name}}</text>
					<text class="vip-card-name">/护士小鹿会员卡</text>
				</view>
				<view class="vip-id">
					卡号：{{vipInfo.cardNum}}
				</view>
				<view class="vip-date">
					有效期：
					
					{{info.createdAt}}
					——{{info.expireTime}}(剩余{{info.remainingDays}}天）
				</view>
			</view>
			<view class="vip-bottom">
				<view class="desc-item" @click="toTequan">
					<view class="content">
					<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/a6d259dc92374fd7.png" mode="" />
						<view class="text">
							权益中心
						</view>
					</view>
					<image class="arrow" src="http://loto.oss-cn-shanghai.aliyuncs.com/email/54599081a90b4a06.png" mode=""></image>
				</view>
				<view class="segmentation">
					|
				</view>
				<view class="desc-item" @click="toVip">
					<view class="content">
						<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/cf203ad58b43448c.png" mode="" />
						<view class="text">
							会员指南
						</view>
					</view>
					<image class="arrow" src="http://loto.oss-cn-shanghai.aliyuncs.com/email/54599081a90b4a06.png" mode=""></image>
				</view>
			</view>
			<view class="copy" @click="handleCopy">
				<image class="copy-image" src="http://loto.oss-cn-shanghai.aliyuncs.com/email/0034115ce70648b5.png" mode=""></image>
				<view class="copy-text">
					复制卡号
				</view>
			</view>
		</view>
		<uni-confirm :show="confirmShow" title="请登录后查看详情" @cancel="bindBtn('cancel')" @confirm="bindBtn('confirm')">
		</uni-confirm>
	</view>
</template>

<script>
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import uniConfirm from '@/components/uni-ui/uni-confirm/uni-confirm.vue'
	export default {
		components: {
			uniConfirm,
			// Model
		},
		name:"vip-card",
		props: {
			vipInfo:{
                required: true,
            },
		},
		watch: {
			vipInfo: {
			  handler(newVal, oldVal) {
				// 这里可以执行基于someProp变化的逻辑
				console.log('someProp changed:', newVal, oldVal);
				if(newVal) {
					this.info.expireTime = this.dayjs(newVal.expireTime).format('YYYY-MM-DD')
					console.log("123213",this.dayjs(newVal.expireTime).format('YYYY-MM-DD'))
					this.info.createdAt = this.dayjs(newVal.createdAt).format('YYYY-MM-DD')
					
					// 解析日期
					const targetDate = this.dayjs(newVal.expireTime);
					 
					// 获取当前时间
					const currentDate = this.dayjs();
					 
					// 计算会员剩余天数
					this.info.remainingDays = targetDate.diff(currentDate, 'day');
				}
			  },
			  deep: true // 如果你需要深度监听对象或数组中的变化，可以设置deep为true
			}
		},
		
		data() {
			return {
				dayjs: dayjs,
				isVip: true,
				info: {
					expireTime: '',
					createdAt: '',
					remainingDays: '',
				},
				confirmShow: false,
				descList: [
					{
						url: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/2afaac90c9724c49.png',
						text:'订单优先通知'
					},
					{
						url: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/99c35d3304ab4e91.png',
						text:'专业培训视频'
					},
					{
						url: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/c575b7872a1e4a8a.png',
						text:'佣金结算增加'
					},
					{
						url: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/8ae61cc8c99a40c7.png',
						text:'护理用品发放'
					},
				]
			};
		},
		methods: {
			async bindBtn(type) {
				console.log(type)
				if (type == 'confirm') {
					let res = await this.$store.dispatch('preLogin')
					if (res) {
						uni.navigateTo({
							url: '../../login-register/one-key-login/one-key-login',
						})
					} else {
						uni.navigateTo({
							url: '../../login-register/login/login',
						})
					}
				}
				this.confirmShow = false
			},
			handleCopy() {
				uni.setClipboardData({
					data: this.vipInfo.cardNum,
					success: () => {
						console.log('success');
						uni.hideToast() //关闭自带的toast
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					},
				})
			},
			async bindBtn(type) {
				console.log(type)
				if (type == 'confirm') {
					let res = await this.$store.dispatch('preLogin')
					if (res) {
						uni.navigateTo({
							url: '../../login-register/one-key-login/one-key-login',
						})
					} else {
						uni.navigateTo({
							url: '../../login-register/login/login',
						})
					}
				}
				this.confirmShow = false
			},
			toShop() {
				if (!this.$store.state.userInfo.id) {
					console.log('111')
					this.confirmShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/purchase/purchase'
				})
			},
			toTequan() {
				uni.navigateTo({
					url: `/pages/purchase/privilege?type=0&isVip=${this.vipInfo ? 1 : 0}` 
				})
			},
			toVip() {
				uni.navigateTo({
					url: '/pages/purchase/purchase-vip'
				})
				
			}
		}
		
	}
</script>

<style lang="less">
	.vip-box {
		display: flex;
		align-items: center;
		justify-items: center;
		width: 100%;
		.vip {
			margin: auto;
			width: 668rpx;
			height: 298rpx;;
			border-radius: 12rpx ;
			background: linear-gradient(109deg, #ADDBFD 1%, #C3E5FE 50%, #64B1E5 98%);
			margin-bottom: 24rpx;
			position: relative;
			overflow: hidden;
			.copy {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				align-items: center;
				background-color: #d6eefd;
				padding: 12rpx;
				border-radius: 0 0 0 10rpx;
				.copy-text {
					font-size: 24rpx;
					color: #353535;
				}
				.copy-image {
					margin-right: 4rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
			.vip-header {
				padding: 32rpx 28rpx;
				.vip-info {
					margin-bottom: 16rpx;
					.vip-name {
						font-size: 48rpx;
						font-weight: 500;
						color: #3D3D3D;
					}
					.vip-card-name {
						font-size: 28rpx;
						font-weight: 500;
						color: #3D3D3D;
					}
				}
				.vip-id {
					margin-bottom: 18rpx;
					font-size: 24rpx;
					color: #3D3D3D;
				}
				.vip-date {
					font-size: 24rpx;
					color: #B2B2B2;
				}
			}
			.vip-bottom {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 70rpx;
				background: #232429;
				display: flex;
				align-items: center;
				.segmentation {
					color: #D8D8D8;
				}
				.desc-item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 16rpx 0 12rpx;
					.content {
						display: flex;
						align-items: center;
						margin-right: 124rpx;
						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
						.text {
							color: #FFFFFF;
							font-size: 28rpx;
							white-space: nowrap;
						}
					}
					.arrow {
						width: 30rpx;
						height: 30rpx;
						
					}
				}
			}
		}
		.no-vip {
			margin: auto;
			width: 668rpx;
			height: 298rpx;;
			border-radius: 12rpx ;
			background: linear-gradient(105deg, #82C7FA 1%, #C3E5FE 50%, #A3D4F4 98%);
			margin-bottom: 24rpx;
			position: relative;
			
			.no-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 16rpx 16rpx 6rpx;
				.header-left {
					display: flex;
					align-items: center;
				}
				.vip-icon {
					width: 120rpx;
					height: 108rpx;
				}
				.title {
					color: #3C8EFF;
					font-size: 36rpx;
					font-weight: 500;
				}
				.desc {
					font-size: 24rpx;
					color: #63A1F7;
				}
				
			}
			
			.vip-desc {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-around;
				border-top: 1px dashed #3C8EFF;
				padding-top: 12rpx;
				margin: 0 16rpx;
				.desc-item {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.icon-box {
						width: 60rpx;
						height: 60rpx;
						background: #6FABFF;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 4rpx;
						.icon {
							width: 40rpx;
							height:40rpx;
						}
					}
					.text {
						font-size: 28rpx;
						color: #3C8EFF;
					}
					
				}
			}
		}
	}
	.button {
		width: 154rpx;
		height: 62rpx;
		border-radius: 40px;
		font-size: 28rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		background: #3C8EFF;
	}
</style>